<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>classify</title>
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
<link href="css/reset.css" rel="stylesheet">
<link href="css/classify.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<script src="js/phone.js"></script>
</head>
<body>
<!-- 顶部导航开始 -->
        <header class="clearfix header">
            <ul class="clearfix">
                <li class="iconfont icon-canju"></li>
                <li>分类</li>
                <li class="iconfont icon-shenglve"></li>
            </ul>
        </header>
 <!-- 顶部导航结束-->
 <!-- 内容区开始 -->
 <div class="container">
     <!-- 搜索开始 -->
     <div class="search">
        <form>
            <p class="por"><i class="iconfont icon-fangdajing inline-block poa"></i><input type="text" class="" placeholder="食谱/食材"></p>
        </form>
    </div>
     <!-- 搜索结束 -->
     <!-- 展示开始 -->
        <div class="classifyContent">
            <div class="contentOne clearfix">
                 <dl>
                    <dt><a href="#"><img  src="img/classify1.png" alt=""></a></dt>
                    <dd>肉类</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify2.png" alt=""></a></dt>
                    <dd>蔬菜</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify3.png" alt=""></a></dt>
                    <dd>鱼虾水产</dd>
                </dl>
            </div>
            <div class="contentOne clearfix">
                 <dl>
                    <dt><a href="#"><img  src="img/classify4.png" alt=""></a></dt>
                    <dd>蛋豆腌咸</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify5.png" alt=""></a></dt>
                    <dd>早餐</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify6.png" alt=""></a></dt>
                    <dd>家常菜</dd>
                </dl>
            </div>
            <div class="contentOne clearfix">
                 <dl>
                    <dt><a href="#"><img  src="img/classify7.png" alt=""></a></dt>
                    <dd>烘焙</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify8.png" alt=""></a></dt>
                    <dd>水果</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify9.png" alt=""></a></dt>
                    <dd>野餐</dd>
                </dl>
            </div>
            <div class="contentOne clearfix">
                 <dl>
                    <dt><a href="#"><img  src="img/classify10.png" alt=""></a></dt>
                    <dd>下饭菜</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify11.png" alt=""></a></dt>
                    <dd>便当</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify12.png" alt=""></a></dt>
                    <dd>沙拉凉菜</dd>
                </dl>
            </div>
            <div class="contentOne clearfix">
                 <dl>
                    <dt><a href="#"><img  src="img/classify13.png" alt=""></a></dt>
                    <dd>素食主义</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify14.png" alt=""></a></dt>
                    <dd>快手菜</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify15.png" alt=""></a></dt>
                    <dd>甜品饮品</dd>
                </dl>
            </div>
            <div class="contentOne clearfix">
                 <dl>
                    <dt><a href="#"><img  src="img/classify16.png" alt=""></a></dt>
                    <dd>小吃</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify17.png" alt=""></a></dt>
                    <dd>外貌协会</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify18.png" alt=""></a></dt>
                    <dd>单声食谱</dd>
                </dl>
            </div>
            <div class="contentOne clearfix">
                 <dl>
                    <dt><a href="#"><img  src="img/classify19.png" alt=""></a></dt>
                    <dd>下酒菜</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify20.png" alt=""></a></dt>
                    <dd>创意菜</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify21.png" alt=""></a></dt>
                    <dd>下午茶</dd>
                </dl>
            </div>
            <div class="contentOne clearfix">
                 <dl>
                    <dt><a href="#"><img  src="img/classify22.png" alt=""></a></dt>
                    <dd>宵夜</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify23.png" alt=""></a></dt>
                    <dd>零食</dd>
                </dl>
                 <dl>
                    <dt><a href="#"><img  src="img/classify24.png" alt=""></a></dt>
                    <dd>节日节气</dd>
                </dl>
            </div>
        </div>
     <!-- 展示结束 -->
 </div>
 <!-- 内容区结束 -->
 <!-- 底部导航栏开始 -->
<footer>
     <ul class="clearfix">
            <li>
                <a href="">
                    <span class="iconfont icon-shouyeshouye"></span>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="iconfont icon-tubiao3"></span>
                    <span>分类</span>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="iconfont icon-faxian"></span>
                    <span>发现</span>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="iconfont icon-icon-test"></span>
                    <span>超市</span>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="iconfont icon-chu"></span>
                    <span>我的厨友</span>
                </a>
            </li>
        </ul>   
</footer>
<!-- 底部导航栏开始 -->
<script src="js/swiper-3.4.0.min.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/discovery.js"></script>      
</body>
</html>